<style lang="scss" src="../form/index.scss" scoped></style>
<template>
    <page-box class="form" :class="{ readOnly: _isReadOnly, send: $route.query.isSend === 'send' }">
        <div class="custom-tabs-box">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="表单介绍"
                    name="formDescribe"
                    :disabled="!_isReadOnly"
                >
                    <richText
                        ref="richTextForm"
                        :departmentList="department.list"
                        v-model="model"
                        :userLevel="userLevel"
                        :richTextActiveName="richTextActiveName"
                        @activeChane="activeChane"
                    ></richText>
                </el-tab-pane>
                <el-tab-pane
                    label="表单设计"
                    name="formDesign"
                    :disabled="!_isReadOnly"
                >
                    <template-form
                        ref="templateFormRef"
                        :model="model"
                        :formType="formType"
                        :userLevel="userLevel"
                        :departmentList="department.list"
                        @toShowPreview="showPreview"
                    >
                    </template-form>
                </el-tab-pane>
            </el-tabs>
            <div class="btn-box">
                <el-button
                    v-if="!_isDetail && activeName === 'formDesign'"
                    type="primary"
                    @click="sure('DRAFT')"
                    size="mini"
                    >保存为草稿</el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleGoFormDesign"
                    v-if="!_isDetail"
                >
                    {{ activeName === "formDescribe" ? "下一步" : "上一步" }}
                </el-button>
                <el-button
                    v-if="!_isDetail && activeName !== 'formDescribe'"
                    size="mini"
                    type="primary"
                    @click="sure('RELEASED')"
                >
                    {{ formType === "edit" ? "更新并发布" : "创建并发布" }}
                </el-button>
                <el-button v-if="_isDetail" @click="copyForm" size="mini">复制</el-button>
                <el-button v-if="_isDetail && $route.query.formStatus.toString() === '0'" @click="edit" size="mini">编辑</el-button>
                <el-button type="text" @click="goBack">取消</el-button>
            </div>
        </div>
        <el-dialog
            class="custom-modal"
            :class="{ wechat: previewType === 'form' }"
            title="小程序端预览"
            :visible.sync="showPreviewDialog"
            append-to-body
            top="10vh"
            destroy-on-close
            :close-on-click-modal="false"
        >
            <div class="preview-title">
                <h4>{{ model.name }}</h4>
                <p v-if="childTab === 'text'">{{ model.desc }}</p>
            </div>
            <preview-list
                :formList="[].concat([], model.items)"
                :previewType="previewType"
                :isPreview="true"
            ></preview-list>
        </el-dialog>
        <el-dialog
            title="小程序端预览"
            :visible.sync="wechatDialogVisible"
            class="wechat-mask"
        >
            <div class="content">
                <h4>{{ model.name }}</h4>
                <p v-html="model.richText"></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleFillIn"
                >我要填报</el-button
                >
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "../form/form.mixin";
import TemplateForm from "../form/src/template-form/index.vue";
import FlowForm from "../form/src/flow-form/index.vue";
import richText from "@/views/module-manage/src/components/richText/index.vue";
// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component({
    // 运营编辑表单页面
    name: "ModuleManageNormFormNotAlive",
    components: {
        TemplateForm,
        FlowForm,
        richText
    }
})
export default class ModuleManageNormForm extends Mixins(FormMixin) {
    // tag = {
    //     id: "",
    //     list: []
    // };

    department: any = {
        id: "",
        list: []
    };

    activeName = "formDescribe";

    get _isReadOnly() {
        return (
            this.$route.query.isDetail === "1" ||
            this.$route.query.isSend === "send"
        );
    }

    activeChane(e: any) {
        this.childTab = e;
    }

    handleGoFormDesign() {
        if (this._isReadOnly) {
            if (this.activeName === "formDesign") {
                this.activeName = "formDescribe";
            } else {
                this.activeName = "formDesign";
            }
        } else if (this.activeName === "formDesign") {
            this.activeName = "formDescribe";
        } else {
            (this.$refs.richTextForm as any).onSubmit().then(() => {
                this.activeName = "formDesign";
            }).catch((e: any) => {
                return this.$message.error(e);
            });
        }
    }

    // 我要填报
    handleFillIn() {
        this.wechatDialogVisible = false;
        this.showPreviewDialog = true;
    }

    async initSearchData() {
        const departmentResponse = await this.$server[
            "moduleManage/department"
        ]();
        if (this.responseHasError(departmentResponse)) {
            return;
        }
        this.department.list = this.buildTypeList(
            departmentResponse.data.data[0].children || []
        );
    }

    async sure(type: any) {
        const templateFormRef: any = this.$refs.templateFormRef;
        const templateFormRefValidate: any = await templateFormRef.submit();
        if (templateFormRefValidate.result) {
            this.submit(type);
            return;
        }
        this.$message({
            duration: 3000,
            message: templateFormRefValidate.msg || "请确保表单数据有效！",
            type: "error"
        });
    }

    // 复制表单
    copyForm() {
        this.$router.push({
            name: (this._isOperationPage ? "Operation" : this._isRegionalAdminPage ? "RegionalAdmin" : this._isTownPage ? "Town" : "TownAdmin") + "ModuleManageForm",
            query: {
                id: this.$route.query.id,
                isCopy: "copy"
            }
        });
        this.init();
    }

    // 编辑
    edit() {
        this.$router.push({
            name: (this._isOperationPage ? "Operation" : this._isRegionalAdminPage ? "RegionalAdmin" : this._isTownPage ? "Town" : "TownAdmin") + "ModuleManageForm",
            query: {
                id: this.$route.query.id
            }
        });
    }
}
</script>
<style lang="scss" scoped>
.custom-tabs-box {
    position: relative;
    height: 100%;
    .btn-box {
        position: absolute;
        right: 20px;
        top: 6px;
    }
    .el-tabs {
        height: 100%;
    }
    ::v-deep {
        .el-tabs__header {
            background: #fff;
            margin-bottom: 10px;
            padding: 0 20px 0 30px;
        }
        .el-tabs__nav {
            .el-tabs__item {
                height: 48px;
                line-height: 48px;
                &.is-disabled {
                    color: #303133 !important;
                }
                &.is-active {
                    color: #de2728 !important;
                }
            }
        }
        .el-tabs__content {
            height: calc(100% - 70px);
            .el-tab-pane {
                height: 100%;
            }
        }
        .el-tabs__nav-wrap::after {
            background: transparent;
        }
    }
}
.send-task-content {
    background: #fff;
    margin-bottom: 10px;
    padding: 18px 20px 10px 26px;
    .send-task-title {
        @include flexLayout(flex, justify, center);
    }
    .item-btn-text {
        max-width: 200px;
        @include textEllipsis();
    }
}

.custom-modal {
    ::v-deep {
        .el-dialog {
            min-width: 900px;

            .el-dialog__header {
                border-bottom: 1px solid #9da1a4;
                padding: 20px 0 4px;
                margin: 0 20px;
            }
            .el-dialog__title {
                font-size: 20px;
                font-family: "PingFang SC";
                font-weight: bold;
                line-height: 28px;
                color: #37383a;
            }

            .el-dialog__body {
                padding-top: 10px;
            }

            .preview-title {
                display: flex;
                flex-direction: column;
                h4 {
                    font-size: 16px;
                }
                p {
                    margin: 0;
                    font-size: 14px;
                    font-family: "PingFang SC Medium";
                    line-height: 22px;
                    color: #37383a;
                }
                .change-btn {
                    font-size: 16px;
                    font-family: "PingFang SC Medium";
                    font-weight: bold;
                    color: #2c82c9;
                    line-height: 22px;
                }
            }
        }
    }
    &.wechat {
        ::v-deep {
            .el-dialog {
                width: 400px;
                min-width: unset;
            }
        }
    }
}

.wechat-mask {
    ::v-deep {
        .el-dialog {
            width: 400px;
            min-width: unset;
            .el-dialog__header {
                border-bottom: 1px solid #9da1a4;
                padding: 20px 0 4px;
                margin: 0 20px;
            }
            .el-dialog__title {
                font-size: 20px;
                font-family: "PingFangSC";
                font-weight: bold;
                line-height: 28px;
                color: #37383a;
            }
            .el-dialog__body {
                height: 540px;
                overflow: scroll;
            }
            .el-dialog__footer {
                padding: 0;
                .dialog-footer {
                    width: 100%;
                    display: flex;
                    button {
                        width: 100%;
                        border-radius: 0;
                    }
                }
            }
        }
    }
}
</style>
